<template>
  <!-- table-expand.vue -->
  <div>
    <Collapse simple v-model="expendValue">
      <Panel :name="index" v-for="(itemList, index) in row" :key="index">
        {{ index }}
        <div slot="content" v-for="(subitem, subindex) in itemList" :key="subindex" class="listFlex">
          <div>{{ subitem.product_model_code }}</div>
          <div>{{ subitem.product_code_child }}</div>
          <div>{{ subitem.product_model_code_desc }}</div>
          <!-- <div>{{ item.product_model_name }}</div> -->
          <!-- <div>{{ item.factory_name }}</div> -->
          <div>{{ subitem.name }}</div>
          <div>{{ subitem.licence_code }}</div>
          <div>{{ subitem.model_name }}</div>
          <div>{{ subitem.factory_name }}</div>
          <div>{{ subitem.inventory_ceiling }}/{{ subitem.inventory_floor }}</div>
          <span class="option fr" @click="showEditModal(subitem)">设置上下限</span>
        </div>
      </Panel>
    </Collapse>
    <Modal v-model="editModal" title="修改上下限" @on-ok="editLimit">
      <Form inline class="formMarginBtm20">
        <FormItem>
          <span>库存上限:</span>
          <InputNumber class="iviewIptWidth250 marginLeft30" v-model="topLimit" :max="999999999" :min="0" placeholder="请输入"></InputNumber><br />
        </FormItem>
        <FormItem class="po-create-number marginRight0">
          <span>库存下限:</span>
          <InputNumber class="iviewIptWidth250 marginLeft30" v-model="bottomLimit" :max="999999999" :min="0" placeholder="请输入"></InputNumber>
        </FormItem>
      </Form>
      <div slot="footer">
        <span class="pageBtn finger btnSure marginRight20px" @click="editLimit">确定</span>
        <span class="pageBtn finger btnCancle" @click="editModal = false">取消</span>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    row: Object,
  },
  data() {
    return {
      expendValue: [],
      wuliaoNumber: '', // 物料号
      editModal: false, // 修改模态框
      topLimit: null, // 上限
      bottomLimit: null, // 下限
    }
  },
  methods: {
    getExpendValue() {
      this.expendValue = []
      for (const item of Object.keys(this.row)) {
        this.expendValue.push(item)
      }
      this.$forceUpdate()
    },
    // 显示修改框
    showEditModal(item) {
      this.editModal = true
      this.wuliaoNumber = item.product_model_code
      this.topLimit = item.inventory_ceiling
      this.bottomLimit = item.inventory_floor
    },
    // 修改物料号上下限
    editLimit() {
      let product_model_code = this.wuliaoNumber
      let inventory_ceiling = this.topLimit
      let inventory_floor = this.bottomLimit
      let reg = /^\d+$/ // 验证规则-非负整数
      if (inventory_ceiling || inventory_floor) {
        if (!inventory_floor) {
          this.$Message.error('请填写库存下限')
        }
        if (!inventory_ceiling) {
          this.$Message.error('请填写库存上限')
        }
        if (inventory_ceiling && inventory_floor) {
          if (reg.test(inventory_ceiling) && reg.test(inventory_floor)) {
            if (Number(inventory_ceiling) > Number(inventory_floor)) {
              let obj = { product_model_code, inventory_ceiling, inventory_floor }
              this.$http.put(this.$api.setLimit, obj).then(res => {
                if (res.status) {
                  this.editModal = false
                  this.$root.eventHub.$emit('updatatable')
                }
              })
            } else {
              this.$Message.error('库存上限必须大于库存下限')
            }
          } else {
            this.$Message.error('请填写非负整数')
          }
        }
      }
      if (!inventory_ceiling && !inventory_floor) {
        let obj = { product_model_code }
        this.$http.put(this.$api.setLimit, obj).then(res => {
          if (res.status) {
            this.editModal = false
            this.$root.eventHub.$emit('updatatable')
          }
        })
      }
    },
  },
  created() {
    this.getExpendValue()
  },
  watch: {
    row(newVal) {
      this.getExpendValue()
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ivu-collapse > .ivu-collapse-item {
  border-top: 0px;
}
.option {
  display: inline-block;
  width: 180px;
  color: #389afc;
  cursor: pointer;
  text-align: center;
}
.marginLeft30 {
  margin-left: 30px;
}
/deep/ .ivu-collapse-content-box {
  display: table;
  width: 100%;
  .listFlex {
    // display: table-row;
    // position: relative;
      display: flex;
      align-items: center;
    div {
      // position: absolute;
    white-space: nowrap;
    overflow: hidden;
    // background-color: #f8f8f9;
    text-align: center;
      &:nth-child(1) {
        min-width: 200px;
        margin-left: 150px;
      }
      &:nth-child(2) {
        // min-width: 680px;
        // min-width: 600px;
        min-width: 200px;
      }
      &:nth-child(3) {
        // min-width: 680px;
        // min-width: 600px;
        min-width: 600px;
      }
      &:nth-child(4) {
        // min-width: 310px;
        min-width: 300px;
      }
      &:nth-child(5) {
        // min-width: 260px;
        min-width: 260px;
      }
      &:nth-child(6) {
        // min-width: 160px;
        min-width: 160px;
      }
      &:nth-child(7) {
        // min-width: 260px;
        min-width: 260px;
      }
      &:nth-child(8) {
        // min-width: 190px;
        min-width: 200px;
      }
      &:nth-child(9) {
        min-width: 200px;
        // min-width: 200px;
      }
    }
  }
}
.marginRight20px {
  margin-right: 20px;
}
</style>
